<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jq-1.12.4.js"></script>
</head>

<body>
    <ul>
        <li>国家卫健委提示慎吃酵米面类食品热</li>
        <li>工信部提醒及时设置SIM卡密码</li>
        <li>中国士兵在中印边境地区迷路走失</li>
        <li>四川14岁男孩高221厘米</li>
        <li>31省区市新增境外输入19例新</li>
        <li>游客讲述上海野生动物园游览经历</li>
    </ul>
    <button class="btn1">sildUp</button>
    <button class="btn2">sildDown</button>
</body>
<script>
    $(function () {
        // let id
        // let ul = document.querySelector('ul')
        // ul.style.overflow = "hidden"
        // let height = parseFloat(getComputedStyle(ul, null).height)
        // let temp = height
        // $(".btn1").click(function() {
        //   id = setInterval(function() {
        //     height -= 1
        //     console.log(height)
        //     ul.style.height = height + "px"
        //     if (height <= 0) {
        //       height = temp
        //       clearInterval(id)
        //       ul.style.height = height + "px"
        //       ul.style.display = "none"
        //     }
        //   }, 1)
        //})
        $(".btn1").click(function () {
            $("ul").slideUp(1000)
        })
        $(".btn2").click(function () {
            $("ul").slideDown(1000)
        })
    })
</script>

</html>